<template>
	<scroll-view class="rui-tabs" :class="status?'fixed':''" scroll-x="true">
		<view class="item" :class="index == cur ?'action':''" v-for="(item, index) in data" :key="index"
			@click="change(item, index)">
			<view class="icon" v-if="index == cur">
				<uni-icons type="fire-filled" size="16" class="custom"></uni-icons>
			</view>
			<view class="name">
				{{item.name}}
			</view>

		</view>
	</scroll-view>

</template>
<script setup>
	import {
		ref,
		toRefs,
		getCurrentInstance,
		watchEffect
	} from "vue"

	const {
		ctx
	} = getCurrentInstance()

	let props = defineProps({
		current: {
			type: Number,
			default: 0
		},
		data: Array
	})
	let cur = ref(props.current)

	const emits = defineEmits(['change'])
	const change = (item, index) => {
		cur.value = index
		emits('change', item)
	}

	let status = ref(0)
	let scroll_top = ref(0)

	const setScroll = e => {
		console.log(e)
		// status.value = e > scroll_top.value;

	}


	// const query = uni.createSelectorQuery().in(ctx);
	// query
	// 	.select(".rui-tabs")
	// 	.boundingClientRect((data) => {
	// 		scroll_top.value = data.top
	// 	}).exec();

	defineExpose({
		setScroll
	})
</script>
<style lang="scss" scoped>
	.fixed {
		position: fixed;
		left: 0;
		top: 100rpx;
		background: #fff;
		z-index: 9999999;
	}

	.custom {
		// background: linear-gradient(to top,  rgba(213, 180, 8, 0.0), rgba(213, 180, 8, .1),rgba(213, 180, 8,.3), var(--color), var(--color));
		background: linear-gradient(to bottom, #f00, #fd5c07, #ffe722);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	.rui-tabs {
		white-space: nowrap;
		width: 100%;
		height: 65rpx;
		line-height: 65rpx;
		scrollbar-width: none !important;

		&::-webkit-scrollbar {
			display: none !important;
		}


		.action {
			font-weight: bold;
			color: var(--color);
			transform: scale(1.3);
			font-family: Times New Roman, Times, serif;

		}

		.item {
			padding: 0 30rpx;
			text-align: center;
			position: relative;
			height: 75rpx;
			line-height: 75rpx;
			display: inline-block;

			.icon {
				position: absolute;
				top: -15rpx;
				right: 45rpx;
				z-index: -1;
			}
		}
	}
</style>